import classNames from 'classnames';
import Button from '../../../component/Button';
// import { BankAccount } from 'src/model/Bank';
import style from './AccountTable.module.scss';

type BankAccount = any

export type Props = {
  data: BankAccount[];
  onClickDelete: (id: string) => void;
};

const AccountTable = ({ data, onClickDelete }: Props) => {

  const elementsMapFunction = (v: BankAccount) => (
    <div key={v.FID}>
      <div className={style.bankList}>
        <div className={style.width2}>{v.FBHm}</div>
        <div className={style.width2}>{v.FBMc}</div>
        <div className={style.width3}>{v.FBZh}</div>
        <div className={style.width1}>{v.FBSf}</div>
        <div className={style.width1}>{v.FBCs}</div>
        <div className={style.width1}>{v.FBFy}</div>
        <div className={classNames(style.width2, style.delete)}>
          <Button appearance="text" className={style.button} onClick={() => onClickDelete(v.FID)}>
            删除
          </Button>
        </div>
      </div>
      <div className={style.divider} />
    </div>
  );

  return (
    <div>
      <div className={style.head}>
        <div className={style.width2}>户名</div>
        <div className={style.width2}>银行资讯</div>
        <div className={style.width3}>帐号</div>
        <div className={style.width1}>银行省份</div>
        <div className={style.width1}>银行城市</div>
        <div className={style.width1}>银行分行</div>
        <div className={style.width2} />
      </div>
      <div className={style.divider} />
      {data.map(elementsMapFunction)}
    </div>
  );
};

export default AccountTable;
